import react from 'react'
import './nav-left.scss'
// import { Button } from 'antd';	//引入按钮
// import 'antd/dist/antd.css';   //还需要引入css样式

export default class NavLeft extends react.Component {
    constructor(props) {
        super(props)
        this.state = {
            navlist: [],
            tabIndex: -1,
            brandList: []
        }
    }
    componentDidMount() {
        // 导航及选项卡
        this.$axios.get('https://apipc-xiaotuxian-front.itheima.net/home/category/head').then(res => {
            if (res.data.msg == '操作成功') {
                this.setState({
                    navlist: res.data.result
                })
            }
        })
        // 品牌推荐请求数据
        this.$axios.get('https://apipc-xiaotuxian-front.itheima.net/home/brand?limit=6').then((res) => {
            if (res.data.msg == '操作成功') {
                this.setState({
                    brandList : res.data.result
                })
            }
        })
    }
    showGoodsNav(index) {
        this.state.tabIndex = index
        this.setState({
            tabIndex: this.state.tabIndex
        })
    }
    hideGoodsNav() {
        this.setState({
            tabIndex: -1
        })
    }
    render() {
        const { navlist, brandList } = this.state
        return (
            <div id="nav-left">
                {navlist.length>0 && (
                    <div className="nav">
                    <ul>
                        {navlist.map((item, index) => {
                            return (
                                <li key={item.id} onMouseOver={this.showGoodsNav.bind(this, index)} onMouseOut={(this.hideGoodsNav.bind(this))}>
                                    <a href="">{item.name}</a>
                                    <a href="">{item.children[0].name}</a>
                                    {item.children[1] && <a href="">{item.children[1].name}</a>}
                                    {this.state.tabIndex == index && (
                                        <div className="navList" >
                                            <h4>分类推荐<span>根据您的购买或者浏览记录推荐</span></h4>
                                            <div className="list">
                                                {item.goods.map((i, index) => {
                                                    return (
                                                        <dl key={i.id}>
                                                            <dt><img src={i.picture} alt="" /></dt>
                                                            <dd>
                                                                <p>{i.name}</p>
                                                                <p>{i.desc}</p>
                                                                <p>￥<span>{i.price}</span></p>
                                                            </dd>
                                                        </dl>
                                                    )
                                                })}
                                            </div>
                                        </div>
                                    )}

                                </li>
                            )
                        })}

                        {/* 品牌推荐 */}
                        <li onMouseOver={() => { this.setState({ tabIndex: navlist.length }) }} onMouseOut={() => { this.setState({ tabIndex: -1 }) }}>
                            <a href="">品牌</a>
                            <a href="">品牌推荐</a>
                            {this.state.tabIndex == navlist.length && (
                                <div className="navList" >
                                    <h4>品牌推荐<span>根据您的购买或者浏览记录推荐</span></h4>
                                    <div className="list">
                                        {brandList.map((item, index) => {
                                            return (
                                                <dl key={index}>
                                                    <dt><img src={item.picture } alt="" /></dt>
                                                    <dd>
                                                        <p>{item.place}</p>
                                                        <p>{item.name}</p>
                                                        <p>{item.desc}</p>
                                                    </dd>
                                                </dl>
                                            )
                                        })}

                                    </div>
                                </div>
                            )}

                        </li>
                    </ul>
                </div>
                )}
                
            </div>
        )
    }
}